<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>监控属性</title>
	</head>
	<script src="./lib/vue.js"></script>
	<body>
		<div id="app">
			<h2>插值展示</h2>
			姓:<input type="text" v-model="xing" /><br />
			名:<input type="text" v-model="ming" /><br />
			姓名:<span>{{xing.slice(0,3) + ming.slice(0,3) }}</span>
			<h2>方法展示</h2>
			姓:<input type="text" v-model="xing" /><br />
			名:<input type="text" v-model="ming" /><br />
			姓名:<span>{{fullName()}}</span>
			<h2>计算属性</h2>
			姓:<input type="text" v-model="xing2" /><br />
			名:<input type="text" v-model="ming2" /><br />
			姓名:<span>{{fullname}}</span> <br />
			姓名:<span>{{fullname2}}</span>
		</div>
	</body>
	<script>
		const vm = new Vue({
			el: '#app',
			data: {
				xing: "",
				ming: "",
				xing2: "",
				ming2: ""
			},
			computed: {
				fullname() {
					return this.xing2 + "--" + this.ming2
				},
				fullname2: {
					get() {
						return "===";
					},
					set(d) {
						console.log(d)
					}
				}

			},

			methods: {
				fullName() {
					return this.xing + this.ming
				}

			}
		})
	</script>
</html>
